/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Animated,
    Platform,
    InteractionManager,
    TouchableHighlight
} from 'react-native';
import { SwipeListView,SwipeRow } from 'react-native-swipe-list-view';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import AddStore from './AddStore';
import StorageUser from '../lib/plugins/StorageUser';
import shopService from '../lib/services/shopService';
import { NavigationActions } from 'react-navigation';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');
export default class LeftPage extends Component{
    constructor(props) {
        super(props);
        // this.userId = 0;
        // this.token = '';
        this.shopList = [];
        this.userId = '';
        this.token = '';
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource:ds.cloneWithRows([]),
        };
        
    }
    componentDidMount(){
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.userId){
                    $this.userId = data.userId;
                }
                if(data.token){
                    $this.token = data.token;
                }
                InteractionManager.runAfterInteractions(() => {
                    $this.getShopList();
                });
            }).catch(err=> {
                console.log(err)
            }); 
    }
    render(){
        return (
            <View style={styles.container}>
            <NavigationBar 
                    leftPress={()=>this.goBack()}
                    leftIcon={'left'} 
                    titleText={'店铺管理'} 
                    leftStyle={styles.leftStyle}/>
                <ScrollView>
                    <View style={{flex:1}}>
                        <SwipeListView
                            dataSource={this.state.dataSource}
                            enableEmptySections={true}
                            closeOnRowBeginSwipe={true}
                            rightOpenValue={-80} 
                            disableRightSwipe={true}
                            style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}
                            renderRow={(data, secdId, rowId, rowMap) => (
                                <View>
                                    <TouchableHighlight underlayColor={'rgba(3,3,3,0.5)'}  
                                        onPress={ ()=> {rowMap[`${secdId}${rowId}`].closeRow();this.goRoot(data) }}>
                                        <View style={{flexDirection:'row',height:80,alignItems:'center',borderTopWidth:1,borderTopColor:'#ccc',backgroundColor:'#fff',paddingLeft:10}}>
                                            <View style={{marginLeft:10,marginRight:10}}>
                                                <ImageWrapper style={{borderRadius:50}} width={50} height={50} icon={data.front?{uri:data.front}:'touxiang'}/>
                                            </View>
                                            <View style={{flex:1,marginLeft:10}}>
                                                <Text style={{fontSize:16}}>{data.merchant_name}</Text>
                                                <Text>{data.shop_introduce||'简介'}</Text>
                                            </View>
                                        </View>
                                    </TouchableHighlight>
                                </View>
                            )}
                            renderHiddenRow={ data => (
                                <View  style={styles.slideBox}>
                                    <TouchableOpacity onPress={()=>this.editStore(data.s_id)}>
                                        <View style={{width:80,flex:1,justifyContent:'center',alignItems:'center'}}>
                                            <Text style={{fontSize:16}}>编辑</Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            )}/>
                    </View> 
                    <View style={{height:40,alignItems:'center',justifyContent:'center',marginBottom:50,marginTop:50}}>
                        <TouchableOpacity onPress={()=>{this.goAddStore()}}>
                            <View style={styles.addButton}>
                                <Text style={{color:'#fff',fontSize:18}}>添 加</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        )
    }
    getShopList(){
        var $this = this;
        shopService.userShopLists(function(data){
            if(data.code==10000){
                console.log(data)
                $this.shopList = data.data;
                $this.setState({
                    dataSource:$this.state.dataSource.cloneWithRows($this.shopList)
                })
            }               
        },$this.userId,$this.token)
    }
    goBack(){
        this.props.navigation.goBack();
    }
    async goRoot(data){
        var obj = {};
        obj.shopName = data.merchant_name;
        obj.shopId = data.s_id;
        obj.shopImage = data.front;
        await StorageUser._saveUser(obj);
        this.props.navigation.state.params.upData(obj);
        this.goBack(); 
    }
    goAddStore(){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('AddStore',{userId:$this.userId});
        this.props.navigation.navigate('DrawerClose');
    }
    editStore(id){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('EditStore',{id:id});
        this.props.navigation.navigate('DrawerClose');
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
    }, 
    slideBox:{
        flexDirection:'row',
        justifyContent:'flex-end',
        flex:1,
    },
    addButton:{
        width:2*width/3,
        height:40,
        backgroundColor:'rgb(79,145,237)',
        borderRadius:5,
        alignItems:'center',
        justifyContent:'center'
    }
});